<script lang="ts" setup>

import {Timer} from "@element-plus/icons-vue";

import {onMounted, ref} from "vue";

import axios from "axios";

function handleEdit(index, row){

}
function handleDelete(index, row){

}
const tableData_item = ref([
])
const dialogVisible =ref(false)
const bus_id=ref(2)
const sugPrice=ref()
const shopItem=ref({
  itemName:"",
  createTime:"",
  sugPrice: sugPrice.value

})
const CreateShopItemRequestDto=ref({
  bus_id:bus_id.value,
  shopItem:shopItem.value
})
const tableData_shopItem = ref([

])
onMounted(()=>{
  axios.get("/shopItem/getShopItemsByBusiness_Id",{params:{
      bus_id:bus_id.value
    }}).then(res=>{
    tableData_shopItem.value=res.data.data.shopItems
  })
  axios.get("/item/getItemsByBusinessId",{params:{
      bus_id:bus_id.value
    }}).then(res=>{
    tableData_item.value=res.data.data.responseDtos
  })
})
function submitForm(){
  if(shopItem.value.sugPrice==null){
    shopItem.value.sugPrice= 99999.0
  }
  axios.put("/business/createShopItem",CreateShopItemRequestDto.value).then(res=>{
    if (res.data.code==200){
      alert("新建商品成功！")
      tableData_shopItem.value=res.data.data.shopItemResponses
    }
    dialogVisible.value=false
  })
}
</script>

<template>
  <div class="wrapper">
    <p>已上架商品：</p><br>
    <div class="shopItem">
      <el-table :data="tableData_item" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">门店本月累计营业额度：999w</p>
              <p m="t-0 b-2">好评：1w+</p>
              <p m="t-0 b-2">差评：0</p>
              <p m="t-0 b-2">综合评分：4.9</p>
              <h3>商品详细信息</h3>
              <el-table :data="props.row.items" style="border: #38CA73">
                <el-table-column label="商品名" prop="itemName" />
                <el-table-column label="商品上架时间" prop="createTime" />
                <el-table-column label="商品售价" prop="actPrice" />
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除
                    </el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="门店名字" prop="shopName" />
        <el-table-column label="创建时间" prop="createTime" />

      </el-table>
    </div>

    <p>未上架商品：</p><br>
    <div class="addShopItemInfo">
      <el-button @click="dialogVisible = true">新增商品</el-button>
      <el-dialog v-model="dialogVisible"
                 title="新建商品信息"
                 width="30%"
      >
        <el-form :model="shopItem">
          <el-form-item label="商品名称" >
            <el-input v-model="shopItem.itemName"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="shopItem.createTime" placeholder="不填写，默认当前时间"></el-input>
          </el-form-item>
          <el-form-item label="建议零售价">
            <el-input v-model="shopItem.sugPrice" placeholder="不填写，默认99999" ></el-input>
          </el-form-item>
          <!-- 更多表单项 -->
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </template>
      </el-dialog>
    </div>
    <div class="Item">
      <el-table :data="tableData_shopItem" style="width: 100%;height: auto">

        <el-table-column label="创建时间" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="更新时间" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </div>
          </template>
        </el-table-column>


        <el-table-column label="商品名字" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.itemName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="建议零售价" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.sugPrice }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
</style>
